<template>
  <div class="user_info">
    <div class="account_picture">
      <el-avatar :size="50" :src="circleUrl" />
    </div>
    <div class="account_detail">
      <span class="account-tatile"><a>{{ userInfo.nickname }}</a></span>
      <el-tag class="ml-2" type="danger" v-if="!true">未认证</el-tag>
      <el-tag class="ml-2" type="success" v-else>已认证</el-tag>
      <p style="text-align:center;">
        <span>
          <el-icon>
            <Memo />
          </el-icon>
          项目数:{{ userInfo.project_num }}
        </span>
        <span>
          <el-icon>
            <svg-icon name="dinYue" />
          </el-icon>
          委托数:{{ userInfo.entrust_num }}
        </span>
        <span>
          <el-icon>
            <MessageBox />
          </el-icon>
          帖子数:{{ userInfo.post_num }}
        </span>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from "vue"
import {
  Memo,
  MessageBox,
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
const useUser = useUserStore();

// 头像
const baseUrl = `http://127.0.0.1:3000`;
const centerUrl = `\\uploads`;
const state = reactive<any>({
  aratarUrl: `\\avatar\\default_svg.svg`, // 头像url默认值
  circleUrl: ``,
  // 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
const { circleUrl } = toRefs(state)
// 请求头像方法
const handleGetAvator = () => {
  // 获取头像url拼接
  const localAvatarUrl = localStorage.getItem('avatarUrl')
  // console.log('old', state.aratarUrl)
  state.aratarUrl = localAvatarUrl ? localAvatarUrl : state.aratarUrl;
  // console.log('new', state.aratarUrl)
  state.circleUrl = `${baseUrl}${centerUrl}${state.aratarUrl}`
  // console.log('state.circleUrl', state.circleUrl)
}

// 获取用户信息
const userInfo = reactive(JSON.parse(useUser.userInfo))
// console.log('userInfo', userInfo)
// 用户详情
let projectNum = 23; //项目数
let entrustNum = 34; // 委托数
let postNum = 1; // 帖子数

onMounted(() => {
  // 请求头像
  handleGetAvator();
})

</script>

<style lang="less" scoped>
.user_info {
  // min-width: 230px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);

  display: flex;
  justify-content: space-around;
  align-items: center;

  .account_detail {
    .account-tatile {
      font-size: 16px;
    }

    p {
      padding-top: 5px;
      color: #757575;
      font-size: 14px;

      span {
        display: block;

        i {
          vertical-align: -10%;
        }
      }
    }
  }


}
</style>